<template>
<div class="nav transparentNav" :class="{transparentNavW:navFlag}">
  <div class="nav-left"><span class="fontHt nav-span">首页</span><span class="fontHt nav-span">暮迟的避难所</span><span class="fontHt nav-span">番剧</span></div>
  <div class="searchBox">
    <div class="searchBoxOne">
      <div class="inputBox">
        <input type="text" v-model="content" class="inputUp" placeholder="搜索">
        <svg class="clearSpan" @click="clear" :class="{show:content !== '' && content !== undefined  && content !== null}" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z" fill="#C9CCD0"></path></svg>
      </div>
      <router-link tag="a" target="_blank" :to="{path:'/search',query:{content:content}}">
        <div class="searchSvg">
          <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z" fill="currentColor"></path></svg>
        </div>
      </router-link>
    </div>
  </div>
  <div class="nav-right">
    <div class="loginImg" >
      <img :class="[{hoverImgIn:!userImg},{hoverImgOut:userImg}]" class="hoverImg" src="http://mcgamehome.love/img2/BIL/4.jpeg" alt="http://mcgamehome.love/img2/BIL/4.jpeg">
<!--      <img v-show="!nowShow" :class="[{hoverImgOutB:!isOpen},{hoverImgInB:isOpen}]" class="userImg" src="http://localhost/img2/BIL/4.jpeg" alt="http://localhost/img2/BIL/4.jpeg" @mouseenter="imgIn" >-->
    </div>
    <div class="loginMsg">
      <div class="nav-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z" fill="currentColor"></path><path d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z" fill="currentColor"></path></svg>
      </div>
      <span class="fontHt">消息</span>
    </div>
    <div class="loginCollect">
      <div class="nav-icon">
        <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      </div>
      <span class="fontHt">收藏</span>
    </div>
    <div class="loginHistory">
      <div class="nav-icon">
        <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z" fill="currentColor"></path><path d="M9.99985 6.6521V10.743" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path><path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
      </div>
      <span class="fontHt">历史</span>
    </div>
    <div class="loginBox" v-if="isToken">
      <button type="button" class="login fontHt" @click="showClick">登录</button>
    </div>
  </div>
</div>
  <div class="tipMsg">
    <div class="tipMsgOne" :class="{r0:first}"></div>
    <div class="msgOne" :class="{r0:first2}">
      <span class="tipOne spanTip">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
  <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
        时间紧迫，没时间完善登录，但不影响视频播放，请放心观影<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---下次功能更新在5月之后</span>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
import API from "@/api/AxiosConfig";
import {useCookies} from "@vueuse/integrations/useCookies";
import {useStore} from "vuex";
const router = useRouter()
const store = useStore()
const cookie = useCookies()
let loginIndex = computed(() => {return store.state.loginIndex})
const content = ref('')
const navFlag = ref(null)
const box = ref(false)
const isToken = ref(false)
const userList = ref({
  userName:'',
  userPassWord:''
})
const first = ref(false)
const first2 = ref(false)
// const userPassWord = ref('')
const loginBox = ref(false)
const passWordType = ref(null)
const passWord = ref(false)
const passWord2 = ref(true)
const isYes = ref(false)
const userImg = ref(null)
const isOpen = ref(null)
const isIndexBox = ref(false)
const nowShow = ref(true)
let timer
watch(()=>loginIndex,()=> {
  if (store.state.loginIndex !== undefined){
    console.log(loginIndex.value)
    isToken.value = false
  }else {
    isToken.value = true
  }
  console.log(isToken.value)
},{deep:true,immediate:true})

onMounted(() => {
  if (cookie.get("one")){

  }else {
    cookie.set("one",1)
    first.value = true
    setTimeout(() => {
      first2.value = true
    },250)
    setTimeout(() => {
      first2.value = false
      setTimeout(() => {
        first.value = false
      },150)
    },5000)
  }
  reScroll()
  window.addEventListener('scroll',reScroll)
  // setTimeout(() => {
  //   watch(()=>userList,()=>{
  //     yz()
  //   },{deep:true,immediate:true})
  // },500)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll',reScroll)
})
function showClick() {
  box.value = !box.value
}
function reScroll(){
  if (document.documentElement.scrollTop >500 ||document.body.scrollTop >500){
    navFlag.value = true
  }else {
    navFlag.value = false
  }
  // console.log(appScroll.value)
}

function imgOut() {
  // clearTimeout(timer)
  // timer = setTimeout(() => {
    userImg.value = false
    isOpen.value = false
    isIndexBox.value = false
    nowShow.value = true
  // },10)
}
function imgIn() {
  clearTimeout(timer)
  timer = setTimeout(() => {
  isOpen.value = true
    nowShow.value = false
    userImg.value = true
    isIndexBox.value = true
  },40)
}
// function loginOut() {
//   cookie.remove('user-name')
//   cookie.remove('user-token')
//   store.commit('setLoginIndex',true)
// }

</script>

<style lang="less" scoped>
.spanTip{
  margin-left: 15px;
  line-height: 25px;
}
.spanTip>svg{
  width: 25px;
  height: 25px;
  position: relative;
  top: 5px;
}
.msgOne{
  width: 98%;
  padding: 10px 0;
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: absolute;
  right: -350px;
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  transition: 0.75s;
}
.tipMsgOne{
  width: 100%;
  height: 90px;
  right: -350px;
  position: absolute;
  background-color: #04c200;
  transition: 0.6s;
}
.tipMsg{
  width: 350px;
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: flex-end;
  transition: 0.6s;
}
@keyframes avatarFadeLarge {
  0% {
    opacity: 0;
    transform: scale(.4) translateY(-2px) translate(3px)
  }

  30% {
    opacity: 1
  }

  to {
    opacity: 1;
    transform: scale(1) translate(-36px, 10px)
  }
}

@keyframes avatarFadeSmall {
  0% {
    transform: scale(1) translate(-36px, 10px)
  }

  60% {
    opacity: 1
  }

  to {
    opacity: 0;
    transform: scale(.4) translateY(-2px) translate(3px)
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}
.r0{
  right: 0;
}
.hoverImgIn{
  animation: fadeIn 1.2s both;
}
.hoverImgOut{
  animation: fadeOut .3s both
}
.hoverImgOutB{
  animation: avatarFadeSmall .35s both;
}
.hoverImgInB{
  animation: avatarFadeLarge .35s both
}
.userImg{
  position: absolute;
  top: 0;
  left: 5px;
  z-index: 55;
  transform-origin: top left;
  width: 85px !important;
  height: 85px !important;
  transform: translate(0px, 0px);
}
.myImgBox{
  height: 65px;
}
.svgRight{
  position: relative;
  top: -1px;
}
.myHome,.outLoginBox{
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  user-select: none;
}
.myHome:hover,.outLoginBox:hover{
  border-radius: 4px;
  background-color: rgba(234, 234, 234, 0.5);
}
.myIndexBox{
  position: absolute;
  width: 250px;
  top: 60px;
  right: 110px;
  background-color: #FFFFFF;
  z-index: 15;
  border-radius: 4px;
  padding: 25px 20px;
}
.disNone{
  display: none;
}
input::-ms-clear, input::-ms-reveal {
  display: none;
}
.BZDQSMMZ{
  display: flex;
  justify-content: center;
  padding: 35px 0 ;
}
.loginButton{
  background: #00aeec;
  border-radius: 6px;
  outline: none;
  border: none;
  width: 45%;
  height: 45px;
  color: #FFFFFF;
  opacity: 0.5;
  cursor: not-allowed;
}
.s{
  width: 1px;
  height: 50px;
  background-color: #e3e5e7;
}
.loginName{
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  align-content: center;
}
.loginNameSpan{
  font-size: 25px;
  margin: 6px 25px;
  cursor: pointer;
}
.x-lg{
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.eye{
  position: absolute;
  right: 15px;
  top: 30%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.inputBox{
  display: flex;
  position: relative;
}
.inputSpan{
  padding: 15px 5px 15px 20px;
}
.fromBox{
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  overflow: hidden;
  width: 70%;
  flex-shrink: 0;
}
.zw{
  width: 100%;
  height: 1px;
  background-color: #e3e5e7;
}
.loginInput{
  outline: none;
  padding: 5px 40px 5px 15px;
  border-radius: 4px;
  border: none;
  //width: 100%;
  height: 40px;
  flex: 1;
  font-size: 16px;
}
.loginBoxWaike{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  align-content: center;
}
.loginBoxs{
  width: 920px;
  height: 450px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
  position: relative;
}
.boxLeft{
  background-color: deeppink;
  flex: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}
.boxRight{
  flex: 3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
}
.fontHt{
  font-family:黑体;
  font-weight: bold;
}
.activeButton{
  opacity: 1;
  cursor: pointer;
}
.active{
  color: #4fa5d9;
  cursor: not-allowed;
}
.disNone{
  display: none;
}
a{
  text-decoration: none;
}
.clearSpan{
  position: absolute;
  flex: 0;
  right: 5px;
  top: 5px;
  display: none;
}
.searchBox{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.searchBoxOne{
  width: 500px;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #F1F2F3;
  border-radius: 6px;
  padding: 0;
  flex-direction: row;
}
.searchSvg{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 5px 15px;
  cursor: pointer;
}
.inputBox{
  display: flex;
  flex: 1;
  position: relative;
}
.inputUp{
  //width: 100%;
  border: none;
  padding: 5px 25px 5px 5px;
  outline: none;
  vertical-align: middle;
  border-radius: 4px;
  margin-left: 10px;
  flex: 1;
  background-color: transparent;
}
.nav-icon{
  display: flex;
  justify-content: center;
}
.nav-icon>svg{
  width: 24px;
  height: 24px;
}
.loginMsg,.loginCollect,.loginHistory{
  padding: 0 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  user-select: none;
  font-size: 14px;
}
.nav-right,.nav-right>div,.nav-left,.nav-left>div{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.login{
  border: none;
  background-color: #2d8cf0;
  color: white;
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  border-radius: 4px;
  margin-left: 30px;
}
.loginImg>img{
  width: 38px;
  height: 38px;
  border-radius: 50px;
  border: 2px solid white;
}
.loginImg{
  margin-right: 20px;
  position: relative;
}
.fontHt,.tipOne{
  font-family: "黑体";
  font-weight: bold;
}
.fontHt>svg{
  fill: deeppink;
  position: relative;
  top: 3px;
}
.nav-span{
  margin-right: 30px;
}
.nav{
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  transition: flex 0.5s;
}
.transparentNav{
  background: linear-gradient(rgba(62, 62, 62, 0.3),rgba(0,0,0,0));
  color: white;
}

.transparentNavW{
  background: #fff;
  box-shadow: 0 2px 4px #00000014;
  color: #61666D;
}
.show{
  display: block;
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .nav{
    padding: 0 15px;
  }
  .searchBoxOne{
    width: 400px;
  }
}
@media screen and (max-width: 1139.8px) {
  .nav{
    padding: 5px;
  }
  .searchBoxOne{
    width: 350px;
  }
}
@media screen and (max-width: 1034px) {
  .nav{
    min-width: 1034px;
    max-width: 1034px;
    width: 1034px;
    padding: 5px;
  }
}
.isOpacity{
  opacity: 0;
}
</style>
